import "./App.less";
import React, { Component } from "react";
import { Subject } from 'rxjs';
import { debounceTime } from 'rxjs/operators';
import { ConfigProvider } from "antd";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Login from "./pages/login";
import Layout from "./component/Layout";
import SystemPage from "./pages/SystemPage";
import CompanyManage from "./pages/CompanyManage";
import PlantInfo from "./pages/PlantInfo/plantInfo";
import FaultPage from "./pages/FaultPage";
import EnterPage from "./pages/EnterPage";
import { diva } from './global';
import DefaultPage from "./pages/defaultPage";


export default class App extends Component {
  state = {
    isRouter: false,
    exampleCode: false,

  };
  changeResolution = new Subject();

  updateResolution = () => {
    if (!diva.isEmbeddedMode()) {
      const width = this.backendContainer.current.clientWidth;
      const height = this.backendContainer.current.clientHeight;
      diva.client.setResolution({ width, height });
      console.log(width, height);
    }
  }
  async componentDidMount() {
    // this.isShow();
    if (this.backendContainer.current) {
      //初始话 webRtc 链接
      await diva.init(this.backendContainer.current);
      if (!diva.client) {
        new Error('diva client is not initialized');
        return;
      }
      this.setState({ isRouter: true });
      //  设置服务后端分辨率
      this.updateResolution();

      // 监听显示区域的改变 
      const resizeObserver = new ResizeObserver(() => {
        this.changeResolution.next(true);
      });
      resizeObserver.observe(this.backendContainer.current);
      this.changeResolution
        .pipe(debounceTime(200))
        .subscribe(this.updateResolution);
    }
  }

  componentWillUnmount() {
    this.changeResolution.unsubscribe();
  }

  render() {
    //获取DOM元素
    this.backendContainer = React.createRef();
  // const a =this.isSelected;
    return (
      <div className="win">
        <div id="backendContainer" ref={this.backendContainer} className="backend-container"></div>
        <main >
          <BrowserRouter>
            <ConfigProvider>
              {/* <Layout 
             
                /> */}
              {/* <Login /> */}
              <Routes>

                <Route exact path="/" element={<EnterPage />} />
                <Route exact path="login" element={<Login />} />
                <Route path="moniringSystem" element={<SystemPage  />} />
                <Route path="companyManage" element={<CompanyManage />} />
                <Route path="plantInfo" element={<PlantInfo />} />
                <Route path="faultPage" element={<FaultPage />} />
                <Route path="defaultPage" element={<DefaultPage />} />
              </Routes>
              {/* {userInfo?<CustomLayout />:<Login />}*/}
            </ConfigProvider>
          </BrowserRouter>
        </main>
      </div>

    )
  }
}